<template>
  <div class="bg">

    <!-- 头部 -->
    <Header :title="title"></Header>

    <div class="LSelect_root">
      <span class="label">图层选择</span>
      <el-select v-model="check" size="mini">
        <el-option v-for="item in check_form" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>

    <!-- 001 -->
    <div class="main" v-show="check === '001' ? true : false">
      <img src="../../../assets/img/空调箱系统图.png" alt="" />
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn11" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn12" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn13" @click="tch = true"></el-button>
      </el-tooltip>
      <div class="tuli">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 002 -->
    <div class="main" v-show="check === '002' ? true : false">
      <img src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636919798043661746.jpg" alt="" />
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn21" @click="tch = true"></el-button>
        <p>001</p>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn22" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn23" @click="tch = true"></el-button>
      </el-tooltip>
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn24" @click="tch = true"></el-button>
      </el-tooltip>

      <div class="tuli">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 003 -->
    <div class="main" v-show="check === '003' ? true : false">
      <img src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636919798762676338.jpg" alt="" />

      <div class="tuli">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 004 -->
    <div class="main" v-show="check === '004' ? true : false">
      <img src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636919872101089912.jpg" alt="" />
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn41" @click="tch = true"></el-button>
        <p>001</p>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn42" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn43" @click="tch = true"></el-button>
      </el-tooltip>
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn44" @click="tch = true"></el-button>
      </el-tooltip>

      <div class="tuli004">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 005 -->
    <div class="main" v-show="check === '005' ? true : false">
      <img src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636919871940761981.jpg" alt="" />
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn51" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn52" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn53" @click="tch = true"></el-button>
      </el-tooltip>
      <div class="tuli004">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 006 -->
    <div class="main" v-show="check === '006' ? true : false">
      <img src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636919871821928885.jpg" alt="" />
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn61" @click="tch = true"></el-button>
        <p>001</p>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn62" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn63" @click="tch = true"></el-button>
      </el-tooltip>
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn64" @click="tch = true"></el-button>
      </el-tooltip>

      <div class="tuli004">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 007 -->
    <div class="main" v-show="check === '007' ? true : false">
      <img src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636823168442433448.png" alt="" />
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn71" @click="tch = true"></el-button>
        <p>001</p>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn72" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn73" @click="tch = true"></el-button>
      </el-tooltip>
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn74" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn75" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn76" @click="tch = true"></el-button>
      </el-tooltip>
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn77" @click="tch = true"></el-button>
      </el-tooltip>

      <div class="tuli007">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 008 -->
    <div class="main" v-show="check === '008' ? true : false">
      <img src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636823194943154047.png" style="height: 60%" />
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn81" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn82" @click="tch = true"></el-button>
      </el-tooltip>

      <div class="tuli008">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <!-- 009 -->
    <div class="main" v-show="check === '009' ? true : false">
      <img src="http://1732n4z304.iok.la:39240/BEEWebAPI/PRImages/636823194943154047.png" style="height: 60%" />
      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn81" @click="tch = true"></el-button>
      </el-tooltip>

      <el-tooltip effect="wihte" content="停止运行" placement="right">
        <el-button class="btn82" @click="tch = true"></el-button>
      </el-tooltip>

      <div class="tuli008">
        <p>图例</p>
        <ul>
          <li>
            <p>停止运行</p>
            <img src="../../../assets/img/盒子标签.png" alt="" />
          </li>
          <li>
            <p>正常运行</p>
            <img src="../../../assets/img/002.png" alt="" />
          </li>
          <li>
            <p>故障报警</p>
            <img src="../../../assets/img/001.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 弹窗部分 -->
    <div class="biger" v-show="tch"></div>
    <div class="tch" v-show="tch">
      <i class="el-icon-error" @click="tch = false"></i>
      <img src="../../../assets/img/kt.png" alt="" />
      <div class="runparameter">
        <p class="el-icon-s-operation">运行参数</p>
        <div style="width: 360px; margin: auto">
          <ul style="float: left">
            <li>1运行状态：<input type="text" v-model="t1.level" /></li>
            <li>1手/自动:<input type="text" v-model="t1.state" /></li>
            <li>1故障报警：<input type="text" v-model="t1.wrng" /></li>
          </ul>
          <ul style="float: right">
            <li>2运行状态：<input type="text" v-model="t1.level" /></li>
            <li>2手/自动:<input type="text" v-model="t1.state" /></li>
            <li>2故障报警：<input type="text" v-model="t1.wrng" /></li>
          </ul>
        </div>
        <p class="el-icon-s-tools">控制设定</p>
        <div style="width: 260px; margin: auto">
          <ul style="float: left">
            <li>1#风机启动设定：</li>
            <li>1#风机停止设定：</li>
            <li>2#风机启动设定：</li>
            <li>2#风机停止设定：</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";


export default {
  components: {
    Header,
  },
  data() {
    return {
      title: "设备监控—空调箱系统",
      tch: false,
      box: "",
      t1: {
        level: "运行中",
        state: "手动",
        wrng: "停止运行",
      },
      check: "001",
      check_form: [
        {
          label: "后勤楼1层空调箱",
          value: "001",
        },
        {
          label: "后勤楼2层空调箱",
          value: "002",
        },
        {
          label: "后勤楼3层空调箱",
          value: "003",
        },
        {
          label: "市民服务中心1层空调箱",
          value: "004",
        },
        {
          label: "市民服务中心2层空调箱",
          value: "005",
        },
        {
          label: "市民服务中心3层空调箱",
          value: "006",
        },
        {
          label: "主楼空调箱",
          value: "007",
        },
        {
          label: "东铺楼空调箱",
          value: "008",
        },
        {
          label: "西铺楼空调箱",
          value: "009",
        },
      ],
    };
  },
  mounted() {},
  beforeUnmount() {},

  methods: {},
};
</script>


<style lang='less' scoped>
.bg {
  text-align: center;
}

.box-tit[data-v-6e92ad55] {
  height: 50px;
  line-height: 29px;
  width: 100%;
  font-size: 18px;
  color: #b8f9ff;
  padding-left: 39px;
  background: url()
    no-repeat;
  box-sizing: border-box;
  display: flex;
}
.box-tit[data-v-6e92ad55] span {
  margin-right: 200px;
}
.main {
  position: relative;
  margin-top: 2rem;
  width: 100%;
  height: 100%;
  img {
    height: 80%;
  }
  .el-button {
    height: 2rem;
    width: 4rem;
    background: url("../../../assets/img/盒子标签.png") no-repeat;
    background-size: cover;
    position: absolute;
    border: none;
  }
  // 001
  .btn11 {
    top: 9%;
    left: 20%;
  }
  .btn12 {
    top: 24%;
    left: 82.2%;
  }
  .btn13 {
    top: 66.5%;
    left: 81.3%;
  }
  // 002
  .btn21 {
    top: 9%;
    left: 20%;
  }
  .btn22 {
    top: 8%;
    left: 79%;
  }
  .btn23 {
    top: 64%;
    left: 81%;
  }
  .btn24 {
    top: 64.5%;
    left: 60.5%;
  }
  // 004
  .btn41 {
    top: 10%;
    left: 71%;
  }
  .btn42 {
    top: 10%;
    left: 74%;
  }
  .btn43 {
    top: 57%;
    left: 32%;
  }
  .btn44 {
    top: 57%;
    left: 36%;
  }
  // 005
  .btn51 {
    top: 8%;
    left: 72%;
  }
  .btn52 {
    top: 8%;
    left: 74.5%;
  }
  .btn53 {
    top: 49%;
    left: 32%;
  }
  // 006
  .btn61 {
    top: 7.5%;
    left: 73.5%;
  }
  .btn62 {
    top: 18%;
    left: 21%;
  }
  .btn63 {
    top: 18%;
    left: 26%;
  }
  .btn64 {
    top: 18%;
    left: 30%;
  }
  // 007
  .btn71 {
    top: 37.5%;
    width: 6px;
    left: 12.8%;
  }
  .btn72 {
    top: 23%;
    width: 6px;
    left: 32.8%;
  }
  .btn73 {
    top: 35%;
    width: 6px;
    left: 42%;
  }
  .btn74 {
    top: 23%;
    width: 6px;
    left: 57%;
  }
  .btn75 {
    top: 35%;
    width: 6px;
    left: 55.5%;
  }
  .btn76 {
    top: 23%;
    width: 6px;
    left: 70%;
  }
  .btn77 {
    top: 37.5%;
    width: 6px;
    left: 84.8%;
  }
  // 008
  .btn81 {
    top: 11.5%;
    left: 45.2%;
  }
  .btn82 {
    top: 42%;
    left: 50.9%;
  }

  .tuli {
    position: absolute;
    top: 45%;
    left: 25%;
    background-color: rgb(0, 0, 77);
    height: 240px;
    width: 500px;
    img {
      height: 3rem;
      width: 4rem;
    }
    p {
      line-height: 60px;
    }
    ul {
      display: flex;
      li {
        flex: 1;
      }
    }
  }

  .tuli004 {
    position: absolute;
    top: 48%;
    left: 50%;
    background-color: rgb(0, 0, 77);
    height: 240px;
    width: 500px;
    img {
      height: 3rem;
      width: 4rem;
    }
    p {
      line-height: 60px;
    }
    ul {
      display: flex;
      li {
        flex: 1;
      }
    }
  }
  .tuli007 {
    position: absolute;
    top: 62%;
    left: 11%;
    background-color: rgb(0, 0, 77);
    height: 187px;
    width: 500px;
    img {
      height: 3rem;
      // width: 4rem;
    }
    p {
      line-height: 50px;
    }
    ul {
      display: flex;
      li {
        flex: 1;
      }
    }
  }
  .tuli008 {
    position: absolute;
    top: 65%;
    left: 41.4%;
    background-color: #ffffff;
    height: 138px;
    width: 356px;
    color: #333;
    img {
      height: 3rem;
      // width: 4rem;
    }
    p {
      line-height: 30px;
    }
    ul {
      display: flex;
      li {
        flex: 1;
      }
    }
  }
}

.biger {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.tch {
  height: 500px;
  width: 1000px;
  background-color: #353e4bd0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -500px;
  padding: 1rem;
  box-shadow: 0 0 10px gray;
  border-radius: 20px;
  i {
    font-size: 25px;
    text-align: right;
    // margin-right: 4rem;
    width: 100%;
  }
  img {
    float: left;
    margin: 2rem auto;
  }
  .runparameter {
    float: right;
    width: 380px;
    // background-color: red;
    ul {
      margin: 1rem 10px;
      li {
        text-align: left;
        margin-top: 1rem;
        input {
          width: 60px;
          border: none;
          outline: none;
          color: white;
        }
      }
    }
    p {
      width: 100%;
      font-size: 20px;
      margin-top: 2rem;
    }
  }
}
.box {
  height: 500px;
  width: 700px;
}

.LSelect_root {
  height: 40px;
  background-image: url("../../../assets/img/1.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 6px 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;
  width: 300px;

  .label {
    font-size: 15px;
    font-weight: 400;
    color: #b8f9ff;
    padding: 0 9px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
}
</style>